<template>
  <div class="rightMiddle">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div style="display: flex">
      <div id="bot2chart" class="bot2chart"></div>
      <div class="companys">
        <div v-for="item in companys" :key="item.name">
          <div class="item-text">{{ item.name }}</div>
          <div class="item">
            <div
              class="item-progress"
              :style="{
                '--percent': `${item.percent || 0}`,
                '--left': 'calc(1% * var(--percent) - 100%)',
                '--trans': 'calc(-50% - var(--left))',
              }"
            >
              <!-- 进度条背景 -->
              <div class="range-slider">
                <!-- 进度条 -->
                <div class="range"></div>
              </div>
              <img :src="require('../assets/point.png')" class="point" />
            </div>
            <div class="item-percent">{{ item.percent + "%" }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RightMiddle",
  props: {},
  components: {},
  data() {
    return {
      cList: [],
      list: [],
      index: 0,
      timer: null,
      isEmpty: false,
      companys: [
        { name: "COD正常率", percent: 97 },
        { name: "氨氮正常率", percent: 91 },
        { name: "总磷正常率", percent: 82 },
        { name: "总氮正常率", percent: 70 },
        { name: "ph正常率", percent: 80 },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    const chart = this.$echarts.init(document.getElementById("bot2chart"));
    const option = {
      title: {
        text: "水质合格率",
        top: "305",
        left: "center",
        textStyle: {
          fontSize: 28,
          fontWeight: "bold",
          color: "#ffffff",
        },
      },
      graphic: [
        // {
        //   type: 'text',
        //   style: {
        //     text: '水质合格率',
        //     textAlign: 'center',
        //     fill: '#ffffff',
        //     fontSize: 20
        //   },
        //   left: 'center',
        //   top: '30%'
        // }
      ],
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00E8A2", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#3950FF", // 100% 处的颜色员工疫苗
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      series: [
        {
          type: "gauge",
          radius: "96%",
          center: ["50%", "40%"],
          startAngle: 245,
          endAngle: -65,
          progress: {
            show: true,
            width: 15,
          },
          detail: {
            valueAnimation: true,
            width: "60%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "5%"],
            fontSize: 36,
            fontWeight: "bolder",
            color: "#00F8FD",
            formatter: "{value}%",
          },
          min: 0,
          max: 100,
          data: [{ value: 90 }],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 15,
              color: [[1, "#212652"]],
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          // 中心圆弧
          type: "gauge",
          radius: "70%",
          center: ["50%", "40%"],
          startAngle: 180,
          endAngle: 0,
          data: [{ value: 1 }],
          max: 1,
          detail: {
            show: false,
          },
          progress: {
            show: true,
            width: 2,
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#ffffff00",
              },
              {
                offset: 0.2,
                color: "#27D3FF",
              },
              {
                offset: 0.8,
                color: "#27D3FF",
              },
              {
                offset: 1,
                color: "#ffffff00",
              },
            ]),
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: [[1, "#2A7CF600"]],
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
    };
    chart.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightMiddle {
  margin-top: 20px;
}
.bot2chart {
  width: 250px;
  height: 392px;
  margin: 20px 40px 0 20px;
}
.companys {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 360px);
  .item-text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
  }
  .item {
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    margin: 6px 0;
    .item-progress {
      // margin-left: 10px;
      width: 80%;
      height: 27px;
      display: flex;
      align-items: center;
      .range-slider {
        height: 6px;
        width: 235px;
        font-size: 0;
        border-radius: 3px;
        background-color: #39455a;
        display: flex;
        align-items: center;
      }
      .range {
        width: calc(1% * var(--percent));
        height: 6px;
        border-radius: 3px;
        background: linear-gradient(
          to right,
          rgba(11, 41, 111, 1),
          rgba(20, 174, 255, 1)
        );
        animation: progress 1.5s linear;
      }
      .point {
        animation: progressImg 1.5s linear;
        position: relative;
        left: var(--left);
        width: 32px;
        height: 32px;
        transform: translateX(var(--trans));
      }
    }
    .item-percent {
      width: 20%;
      text-align: right;
      font-size: 22px;
      font-weight: 600;
      color: #39d2ff;
    }
  }
}
</style>
